<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>电商大数据管理平台</title>
  <link rel="icon" href="icon.ico">
  <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="css/dashboard.css">
  <link rel="stylesheet" type="text/css" href="plugins/element-ui/theme-default/index.css" />
  <link rel="stylesheet" href="js/umeditor1.2.3-utf8-jsp/themes/default/css/umeditor.css" />
  <!--[if lt IE 9]>
    <script src="plugins/html5shiv/html5shiv.min.js"></script>
    <script src="plugins/respond/respond.min.js"></script>
    <![endif]-->
</head>
<style>

</style>

<body>
  <div id="app">
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
            aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
          <a class="navbar-brand" href="#" style="font-size: x-large;"><strong><b>电商大数据管理平台</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </strong></a>
        </div>
        <navbars :acv='bnav'></navbars>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row" id="show">
        <datanav :ds="newdpot"></datanav>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <div>
            <div class="row">
              <div class="col-xs-8">
                <h2 style="color: #0D81F5;"><b>季度分析报告</b></h2>
              </div>
            </div>


            <!--开始-->
            <div class="row placeholders alert alert-info" style="padding-top: 10px;padding-bottom: 10px;">
              <div class="col-xs-12">

                <!--<span>区域选择：</span>-->
                <!--<el-select v-model="value" placeholder="市级" style="width:110px;">
                                <el-option v-for="item in options" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select v-model="value2" placeholder="区县" style="width:110px;">
                                <el-option v-for="item in options2" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
                <!--<span>时间选择：</span>
                            <el-select v-model="value3" placeholder="年度" style="width:110px;">
                                <el-option v-for="item in options3" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>

                            <el-select v-model="value4" placeholder="季度" style="width:110px;">
                                <el-option v-for="item in options4" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>-->

                <div class="btn-group">
                  <button type="button" onclick="stamp()" value="打印报告">打印预览</button>
                </div>
              </div>
            </div>
            <div style="padding-left: 50px;padding-right: 50px;">
              <h2 class="sub-header text-center">铜仁市电子商务发展分析报告</h2>
              <p style="margin-bottom:40px">
                <p><b>一、总体情况</b>（图文，样本为本季度汇总、上季度汇总数据、上年同期汇总数据）</p>
                <p>
                  <!-- 加载编辑器的容器 -->
                  <script id="container1" style="width:100%;" name="content" type="text/plain" name="content"></script>
                </p>
                </br>

            </div>
            </br>
            <button class="btn btn-lg btn-info btn-block" onclick="stamp()">生成报告预览</button>

          </div>
        </div>
        <!--结束-->
        <br/><br/><br/><br/>


      </div>

      <div id="dayin" style="padding-top: 100px;padding-bottom: 100px;display:none;">
        <p align="center">
          <button type="button" onclick="stamps()" value="打印报告">打印报告</button>
          <button type="button" onclick="stampss()" value="打印报告">取消</button>
        </p>
        <div id="dayins" style="padding-left: 100px;padding-right: 100px; ">
          <h2 style="text-align:center" class="sub-header text-center">铜仁市电子商务发展分析报告</h2>
          <p style="margin-bottom:40px">
            <p><b>一、总体情况</b></p>
            <p>
              <div id="cont1"></div>
            </p>
            </br>
        </div>
      </div>
    </div>
  </div>


  <div style="padding-top: 150px" class="modal fade" id="uploadImg" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="selectCateModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">上传图片</h4>
        </div>
        <div class="modal-body">
          <div id="imgUploadWrapper"></div>
        </div>
        <div class="modal-footer">
          <button type="button" id="uploadImgConfirm" class="btn btn-primary">确认</button>
        </div>
      </div>
    </div>
  </div>

  <div style="padding-top: 150px" class="modal fade" id="chartshow" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="selectCateModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" style="width:980px;">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">插入图表</h4>
        </div>
        <div class="modal-body" style="width:980px;">
          <div>
            <select class="form-control" style="width:200px;" id="chartselect">
                          <option value="1">图表1</option>
                          <option value="2">图表2</option>
                          <option value="3">图表3</option>
                          <option value="4">图表4</option>
                          <option value="5">图表5</option>
                          <option value="6">图表6</option>
                          <option value="7">图表7</option>
                          <option value="8">图表8</option>
                          <option value="9">图表9</option>
                          <option value="10">图表10</option>
                      </select>
            <el-select v-model="value" placeholder="市级" style="width:110px;">
              <el-option v-for="item in options" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div id="main1" style="height:300px;width:940px;margin:auto;"></div>
        </div>
        <div class="modal-footer">
          <button type="button" id="chartclose" class="btn btn-primary">确认</button>
        </div>
      </div>
    </div>
  </div>

  <script src="plugins/jquery/jquery.min.js"></script>
  <script src="plugins/bootstrap/js/bootstrap.min.js"></script>
  <script src="js/ie10-viewport-bug-workaround.js"></script>
  <script type="text/javascript" src="js/vue.min.js"></script>
  <script type="text/javascript" src="js/nav.js"></script>
  <script src="plugins/element-ui/index.js"></script>

  <script type="text/javascript" src="js/echarts.min.js"></script>

  <!--<script src="umeditor1.2.3-utf8-jsp/third-party/jquery.min.js"></script>-->
  <script src="js/umeditor1.2.3-utf8-jsp/third-party/template.min.js"></script>
  <script src="js/umeditor1.2.3-utf8-jsp/umeditor.config.js"></script>
  <script src="js/umeditor1.2.3-utf8-jsp/umeditor.js"></script>
  <script src="js/umeditor1.2.3-utf8-jsp/lang/zh-cn/zh-cn.js"></script>

  <!--<script src="js/ueditor-1.4.3.3/ueditor.config.js"></script>
<script src="js/ueditor-1.4.3.3/ueditor.all.js"></script>-->
  <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
  <script src="js/common.js"></script>

  <!-- plupload -->
  <script src="js/plupload/crypto.js"></script>
  <script src="js/plupload/hmac.js"></script>
  <script src="js/plupload/sha1.js"></script>
  <script src="js/plupload/base64.js"></script>
  <script src="js/plupload/plupload.full.min.js"></script>
  <script src="js/plupload/upload.js"></script>
  <script>
    //获取年度和季度传参，全局
    var datayears = GetQueryString("years");
    var datayquarter = GetQueryString("quarter");

    var txt = '';

    function temeples() {
      txt =
        '<p><strong style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;">一、总体情况</strong><img src="" class="t1">\
                </p><p>\
                <strong style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;"><br/></strong>\
                </p><p>\
                <strong style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;"></strong></p>\
                <p style="margin-top: 0px; margin-bottom: 10px; font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;">\
                <strong>二、独立分析</strong>\
                </p>\
                <p style="margin-top: 0px; margin-bottom: 10px; font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;">\
                （一）平台 </p><p>\
                <strong style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;"><br/></strong>\
                </p>\
                <p>\
                    <span style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;">（二）产品</span><strong style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;"><br/></strong><br/>\
                </p>\
                <p>\
                    <span style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;">（三）主体</span>\
                </p>\
                <p>\
                    <span style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;"><br/></span>\
                </p>\
                <p>\
                    <span style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;"><strong style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;">三、工作建议</strong></span>\
                </p>'
    }
    temeples();

    //数据报告对象
    var dataTemplate = {
      "id": "",
      "generalSituation": "", //总体情况
      "platformStatistics": "", //平台统计
      "productAnalysis": "", //产品分析
      "subjectAnalysis": "", //主体分析
      "workProposal": "", //工作建议
      "quarter": "" //季度
    };
    var dataObj = dataTemplate;
    var ue1;
    var imgade = "";
    var chartdata = {
      title: '大数据量面积图',
      xdata: ['碧江区', '大龙经济开发区', '德江县', '江口县', '思南县', '松桃县'],
      sname: "平台数量",
      lname: "贸易数量",
      sdata: [5020, 4900, 4523, 3600, 2003, 1600],
      ldata: []
    }

    var ajaxchart = {
      chart1: function () {
        var myobj = {
          title: '电商总体分析报告',
          xdata: ['电商综合服务平台数量', '电商平台总数', '发入量', '发出量', '物流网点', '电商平台销售的产品', '自建平台数量', '第三方平台数量',
            '培训批次', '培训人数'
          ],
          sname: "数量",
          lname: "",
          sdata: [],
          ldata: []
        };
        var datas = {};
        $.ajax({
          url: '/ebb/collectivity/all?year=' + datayears + '&quarter=' + datayquarter,
          type: 'get',
          success: function (result) {
            datas = result;
            for (var i in datas) {
              if (datas.hasOwnProperty(i)) {
                myobj.sdata.push(datas[i]);
              }
            }
            chartdata = myobj;
            makechart('t1');
          }
        });

      },
      chart2: function () {
        var myobj = {
          title: '电商平台类型及每个类型的交易情况',
          xdata: [],
          sname: "交易量",
          lname: "交易额",
          sdata: [],
          ldata: []
        };
        var datas = [];
        $.ajax({
          url: '/ebb/collectivity/ebbAnalysisByType?year=' + datayears + '&quarter=' +
            datayquarter,
          type: 'get',
          success: function (result) {
            datas = result;
            for (var i = 0; i < datas.length; i++) {
              myobj.xdata.push(datas[i].type)
              myobj.sdata.push(datas[i].businessVolume)
              myobj.ldata.push(datas[i].tradingVolume)
            }
            chartdata = myobj;
            makechart('t2');
          }
        });
      },
      chart3: function () {
        var myobj = {
          title: '电商平每一季度及其中每月的交易情况',
          xdata: [],
          sname: "交易量",
          lname: "交易额",
          sdata: [],
          ldata: []
        };
        var datas = [];
        $.ajax({
          url: '/ebb/collectivity/ebbMonthAndQuarterDataAnalysis?year=' + datayears +
            '&quarter=' + datayquarter,
          type: 'get',
          success: function (result) {
            datas = result;
            for (var i = 0; i < datas.length; i++) {
              myobj.xdata.push(datas[i].type)
              myobj.sdata.push(datas[i].businessVolume)
              myobj.ldata.push(datas[i].tradingVolume)
            }
            chartdata = myobj;
            makechart('t3');
          }
        });
      },
      chart4: function () {
        var myobj = {
          title: '店铺top分析统计信息',
          xdata: [],
          sname: "交易量",
          lname: "交易额",
          sdata: [],
          ldata: []
        };
        var datas = [];
        $.ajax({
          url: '/ebb/collectivity/ebbMonthAndQuarterDataAnalysis?year=' + datayears +
            '&quarter=' + datayquarter,
          type: 'get',
          success: function (result) {
            datas = result;
            for (var i = 0; i < datas.length; i++) {
              myobj.xdata.push(datas[i].type)
              myobj.sdata.push(datas[i].businessVolume)
              myobj.ldata.push(datas[i].tradingVolume)
            }
            chartdata = myobj;
            makechart('t4');
          }
        });
      },
      chart5: function () {
        var datas = {};
        $.ajax({
          url: '/ebb/collectivity/all?year=' + datayears + '&quarter=' + datayquarter,
          type: 'get',
          success: function (result) {
            console.log(result);
            datas = result;
          }
        });
        return datas;
      },
      chart6: function () {
        var datas = {};
        $.ajax({
          url: '/ebb/collectivity/all?year=' + datayears + '&quarter=' + datayquarter,
          type: 'get',
          success: function (result) {
            console.log(result);
            datas = result;
          }
        });
        return datas;
      },
    }

    //解析html字符串
    var tmplDom = $(txt);

    //图表生成图片
    function makechart(chart) {
      var option = {
        title: {
          left: 'center',
          text: chartdata.title,
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [{
          type: 'category',
          data: chartdata.xdata,
          axisLabel: {
            interval: 0,
            rotate: 20 //-30度角倾斜显示
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#dddddd',
              type: 'dashed',
              width: 1
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(144,238,144,0.05)', 'rgba(135,200,250,0.05)']
            }
          },
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
            type: 'value',
            name: chartdata.sname,
            axisLabel: {
              formatter: '{value} '
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#dddfff',
                type: 'dotted',
                width: 1
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(205,92,92,0.05)', 'rgba(255,215,0,0.05)']
              }
            }
          },
          {
            type: 'value',
            name: chartdata.lname,
            axisLabel: {
              formatter: '{value} '
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#dddfff',
                type: 'dotted',
                width: 1
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(205,92,92,0.05)', 'rgba(255,215,0,0.05)']
              }
            }
          }
        ],
        series: [{
            name: chartdata.sname,
            type: 'bar',
            data: chartdata.sdata,
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#323232',
                  fontSize: 14
                }
              }
            },
          },
          {
            name: chartdata.lname,
            type: 'bar',
            data: chartdata.ldata,
            yAxisIndex: 1,
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#323232',
                  fontSize: 14
                }
              }
            },
          }
        ]
      };
      var myChart = echarts.init(document.getElementById('main1'));
      myChart.setOption(option);

      imgade = myChart.getDataURL("png");

      var chartCss = tmplDom.find('.' + chart);
      if (chartCss.length > 0) {
        chartCss.attr('src', imgade);
      }
      console.log(chartCss);
    }

    ajaxchart.chart1();



    $(window).ready(function () {
      "use strict";
      var obj1 = document.getElementById("dayin");
      dataObj.quarter = GetQueryString('years') + "-" + GetQueryString('quarter'); //季度
      ueEditorInit();
      obj1.style.display = "none";
      ajaxchart.chart1();
      loadDataReport(); //加载当前季度的数据报告
    });







    //百度编辑器
    function ueEditorInit() {
      window.UMEDITOR_CONFIG.toolbar = [
        // 加入一个 myinput
        ' source | undo redo | bold italic underline strikethrough  forecolor backcolor | removeformat |',
        '| justifyleft justifycenter justifyright justifyjustify |',
        'link unlink | emotion image video | map',
        '| fullscreen | imgupload | myinput'
      ];

      $("#chartclose").on("click", function () {
        ue1.execCommand('insertimage', {
          src: imgade,
          width: '80%'
        });
        $("#chartshow").modal("hide");
      })

      $("#chartselect").change(function () {
        var p = parseInt($(this).children('option:selected').val());
        switch (p) {
          case 1:
            ajaxchart.chart1();
            break;
          case 2:
            ajaxchart.chart2();
            break;
          case 3:
            ajaxchart.chart3();
            break;
          case 4:
            ajaxchart.chart4();
            break;
          case 5:
            ajaxchart.chart5();
            break;
          case 6:
            ajaxchart.chart6();
            break;
          default:
            break;
        }
      })

      UM.registerUI('myinput',
        function (name) {
          var me = this;
          var $btn = $.eduibutton({
            icon: name,
            click: function () {
              makechart();
              $("#chartshow").modal("show");
            },
            title: '插入图表'
          });

          this.addListener('selectionchange', function () {
            //切换为不可编辑时，把自己变灰
            var state = this.queryCommandState(name);
            $btn.edui().disabled(state == -1).active(state == 1)
          });
          return $btn;
        }
      );

      UM.registerUI('imgupload',
        function (name) {
          var me = this;
          var $btn = $.eduibutton({
            icon: name,
            click: function () {

              $("#uploadImg").modal("show");

              var ossfile = $("#imgUploadWrapper").imgUpload();
              $("#uploadImgConfirm").on("click", function (e) {
                var imgHtml = "";
                if (typeof ossfile.uploaded != 'undefined' && ossfile.uploaded.length >
                  0) {
                  for (var i = 0; i < ossfile.uploaded.length; i++) {
                    imgHtml += '<img src="' + ossfile.uploaded[i] + '">';
                  }
                }
                ue1.execCommand('insertHtml', imgHtml);

                $("#uploadImg").modal("hide");

                return true;
              });
            },
            title: '插入图片'
          });

          this.addListener('selectionchange', function () {
            //切换为不可编辑时，把自己变灰
            var state = this.queryCommandState(name);
            $btn.edui().disabled(state == -1).active(state == 1)
          });
          return $btn;
        }
      );
      ue1 = UM.getEditor('container1');
      ue1.ready(function () {
        ue1.setContent(txt);
      });

    }


    //图片
    var client = new OSS.Wrapper({
      region: oss.region,
      accessKeyId: oss.accessKeyId,
      accessKeySecret: oss.accessKeySecret,
      bucket: oss.bucket
    });
    document.getElementById('fileName').addEventListener('change', function (e) {
      var file = e.target.files[0];
      console.log(file);
      var storeAs = "headImg/" + getUuid() + ".jpg";
      console.log(file.name + ' => ' + storeAs);
      client.multipartUpload(storeAs, file).then(function (result) {
        var uploadPath = "http://" + oss.bucket + ".oss-cn-shenzhen.aliyuncs.com/" + storeAs;
        console.log(uploadPath);
        $("[name=img]").attr("src", uploadPath);
      }).catch(function (err) {
        console.log(err);
      });

      function getUuid() {
        var len = 32; //32长度
        var radix = 16; //16进制
        var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
        var uuid = [],
          i;
        radix = radix || chars.length;
        if (len) {
          for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
        } else {
          var r;
          uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
          uuid[14] = '4';
          for (i = 0; i < 36; i++) {
            if (!uuid[i]) {
              r = 0 | Math.random() * 16;
              uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
            }
          }
        }
        return uuid.join('');
      }
    });
  </script>
  <script>
    function stamp() {
      //获取数据报告的内容
      var sText1 = ue1.getContent();

      //设置数据报告对象
      dataObj.generalSituation = sText1;

      //保存数据报告
      saveDataReport();
      document.getElementById("cont1").innerHTML = sText1;

      var obj = document.getElementById("show");
      obj.style.display = "none";
      var obj1 = document.getElementById("dayin");
      obj1.style.display = "block";
    }

    function stamps() {
      var newstr = document.getElementById("dayins").innerHTML;
      var oldstr = document.body.innerHTML; //保存原先网页的代码
      document.body.innerHTML = newstr; //将网页内容更改成需要打印
      window.print();
      document.body.innerHTML = oldstr;
    }

    function stampss() {
      var obj = document.getElementById("show");
      obj.style.display = "block";
      var obj1 = document.getElementById("dayin");
      obj1.style.display = "none";
    }
    //查询数据报告
    function loadDataReport() {
      $.ajax({
        url: '/ebb/datareport/',
        type: 'get',
        data: {
          'index': 1,
          'size': 10,
          'quarter': dataObj.quarter
        },
        success: function (result) {
          //设置数据报告对象
          dataObj = result.data.length > 0 ? result.data[0] : dataTemplate;
          //总体情况
          ue1.addListener("ready", function () {
            ue1.setContent(dataObj.generalSituation);
          });

          ue1.setContent(dataObj.generalSituation);

        }
      });
    }
    //保存数据报告
    function saveDataReport() {
      if (!dataObj.id) { //如果ID为空，新增
        $.ajax({
          url: '/ebb/datareport/',
          type: 'post',
          data: JSON.stringify(dataObj),
          contentType: "application/json",
          success: function (result) {
            console.log("报表生成成功！");
          }
        });
      } else { //否则，更新
        $.ajax({
          url: '/ebb/datareport/',
          type: 'put',
          data: JSON.stringify(dataObj),
          contentType: "application/json",
          success: function (result) {
            console.log("报表生成成功！");
          }
        });
      }

    }
    new Vue({
      el: "#app",
      data: {
        bnav: {
          number: 4,
        },
        newdpot: GetQueryString('years') + "第" + GetQueryString('quarter') + "季度",
        options: [{
            value: '1',
            label: '图表1'
          }, {
            value: '2',
            label: '图表2'
          }, {
            value: '3',
            label: '图表3'
          }, {
            value: '4',
            label: '图表4'
          },
          {
            value: '5',
            label: '图表5'
          }, {
            value: '6',
            label: '图表6'
          }, {
            value: '7',
            label: '图表7'
          }, {
            value: '8',
            label: '图表8'
          },
          {
            value: '9',
            label: '图表9'
          }, {
            value: '10',
            label: '图表10'
          }
        ],
        options3: [{
          value: '2017',
          label: '2017'
        }, {
          value: '2016',
          label: '2016'
        }],
        options4: [{
          value: '1',
          label: '第一季度'
        }, {
          value: '2',
          label: '第二季度'
        }, {
          value: '3',
          label: '第三季度'
        }, {
          value: '4',
          label: '第四季度'
        }],
        value: 1,
        value3: '2017',
        value4: '1',
      },
      computed: {

      },
      mounted: function () {

      },
      methods: {

      },
      watch: {
        value3: function (value) {
          dataObj.quarter = value + '-' + 1; //设置查询参数
          loadDataReport();
        },
        value4: function (value) {
          var year = this.value3;
          dataObj.quarter = year + '-' + value; //设置查询参数
          loadDataReport()
        }
      }
    });
  </script>
</body>

</html>